import React, { useEffect, useState } from 'react';
import { Button, Table, Switch, notification } from 'antd';
import { PlusOutlined, DownloadOutlined,DeleteOutlined } from '@ant-design/icons';
import _ from 'lodash'
import './Banner.scss'
import { useNavigate } from 'react-router-dom';
import service from '../../../api'

function Banner(props) {
    var navigate = useNavigate()

    const [bannerlist, setBannerlist] = useState([])
    //请求轮播图列表
    var getbannerlist = async () => {
        var res = await service.banner.banner_list();
        console.log(res.data.data);
        setBannerlist(res.data.data)
    }
    useEffect(() => {
        getbannerlist()
    }, [])
    //跳转到添加轮播图页面
    var tobannerAdd = () => {
        navigate('/index/banneradd');
    }
    //切换状态
    var toChange = async (checked, bannerid) => {
        notification.destroy();
        var res = await service.banner.banner_updateFlag({ bannerid, flag: checked });
        if (res.data.code == 200) {
            notification.success({ message: 'flag已更改!' })
            var item = bannerlist.find((item) => item.bannerid == bannerid)
            if (item) {
                item.flag = !item.flag
            }
            //实时更新组件状态
            var newbannerlist = _.cloneDeep(bannerlist)
            setBannerlist(newbannerlist)
        }
    }
    //删除轮播图
    var toDelete = async (bannerid) => {
        notification.destroy();
        var res = await service.banner.banner_delete({ bannerid });
        if (res.data.code == 200) {
            notification.success({ message: '删除图片成功!' });
            //删除本地图片
            var index = bannerlist.findIndex((item) => item.bannerid == bannerid)
            if (index != -1) {
                //对本地数据深拷贝( 否则组件不更新 )
                var newbannerlist = _.cloneDeep(bannerlist);
                newbannerlist.splice(index, 1);
                setBannerlist(newbannerlist);
            }
        }
    }
    //删除全部
    var toDeleteAll = async () => {
        var res = await service.banner.banner_removeAll();
    }
   
    const columns = [
        {
            title: '序号',
            key: 'number',
            render: (_, record, index) => <div>{index + 1}</div>,
        },
        {
            title: '图片',
            key: 'picture',
            width: 200,
            render: (_, record, index) => <img src={record.img} />,
        },
        {
            title: '图片链接',
            key: 'link',
            //   render: (_,record,index) => <a href={record.address}> 链接 </a>,
            render: (_, record, index) => <Button type='link' href={record.link}> 链接 </Button>,
        },
        {
            title: '提示',
            key: 'tip',
            dataIndex: 'alt'
        },
        {
            title: '是否展示',
            key: 'isShow',
            render: (_, record, index) => <Switch checked={record.flag} onChange={(checked) => { toChange(checked, record.bannerid) }} />,
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record, index) => <Button danger type="primary" onClick={() => { toDelete(record.bannerid) }}> Delete </Button>,
        },
    ]
    return (
        <div className='banner-box'>
            <div className="banner-box-header">
                <Button type="primary" onClick={tobannerAdd}>添加轮播图 <PlusOutlined /></Button>
                <Button type="primary">导出excel <DownloadOutlined /></Button>
                <Button danger type="primary" onClick={() => { toDeleteAll() }}>删除全部图片<DeleteOutlined /></Button>
            </div>
            <Table className='table' style={{ marginTop: 20 }} columns={columns} dataSource={bannerlist} />

        </div>
    );
}

export default Banner;